<template>
  <el-card shadow="navar">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" size="medium" label-width="120px">
        <el-col :span="12">
          <el-form-item label="活动名称" prop="seckillName">
            <el-input
              v-model.trim="formData.seckillName"
              :disabled="disabled"
              placeholder="暂无"
              :maxlength="50"
              show-word-limit
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动状态" prop="status">
            <el-select
              v-model.number="formData.status"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in dict.type.activity_status"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动开始时间" prop="timeStart">
            <el-date-picker
              v-model.trim="formData.timeStart"
              :disabled="disabled"
              type="datetime"
              placeholder="暂无"
              :style="{ width: '100%' }"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动结束时间" prop="timeEnd">
            <el-date-picker
              v-model.trim="formData.timeEnd"
              :disabled="disabled"
              type="datetime"
              placeholder="暂无"
              :style="{ width: '100%' }"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动现价/元" prop="nowPrice">
            <el-input
              v-model.trim="formData.nowPrice"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动原价/元" prop="costPrice">
            <el-input
              v-model.trim="formData.costPrice"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否有推荐奖励" prop="isReferralBonuses">
            <el-radio-group v-model="formData.isReferralBonuses">
              <el-radio
                :disabled="disabled"
                v-for="item in dict.type.activity_isReferralBonuses"
                :key="item.value"
                :label="parseInt(item.value)"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动总数量" prop="countNumber">
            <el-input
              v-model.trim="formData.countNumber"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="虚拟已售数量" prop="inventedSalesNumber">
            <el-input
              v-model.trim="formData.inventedSalesNumber"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="可抢购数量" prop="rushBuyNumber">
            <el-input
              v-model.trim="formData.rushBuyNumber"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动门店/部门" prop="applicableUnit">
            <el-input
              v-model.trim="formData.applicableUnit"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间" prop="createTime">
            <el-date-picker
              v-model.trim="formData.createTime"
              :disabled="disabled"
              type="datetime"
              placeholder="暂无"
              :style="{ width: '100%' }"
              default-time="0:00:00"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属租户" prop="tenantName">
            <el-input
              v-model.trim="formData.tenantName"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建人" prop="userName">
            <el-input
              v-model.trim="formData.userName"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-divider></el-divider>
          <el-form-item label="添加秒杀商品">
            <el-table style="margin-top: 10px" :data="goodsList">
              <el-table-column label="商品类型" align="center" prop="goodsType">
                <template slot-scope="scope">
                  {{
                    scope.row.goodsType
                      | typeFilter(dict.type.activity_goodsType)
                  }}
                </template>
              </el-table-column>
              <el-table-column
                label="商品服务名称"
                align="center"
                prop="goodsServerName"
              ></el-table-column>
              <el-table-column
                label="销售价"
                align="center"
                prop="goodsServerPrice"
              ></el-table-column>
              <el-table-column
                label="数量"
                align="center"
                prop="goodsServerNumber"
              ></el-table-column>
              <el-table-column
                label="商品服务描述"
                align="center"
                prop="goodsServerDescribe"
              ></el-table-column>
            </el-table>
          </el-form-item>
          <el-divider></el-divider>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动封面" prop="coverImage">
            <el-image
              :src="getImgUrl(formData.coverImage)"
              lazy
              class="img"
              fit="contain"
            ></el-image>
          </el-form-item>
          <el-form-item label="详情封面" prop="detailsImage">
            <el-image
              v-for="(item, index) in formData.detailsImage"
              :key="index"
              :src="getImgUrl(item)"
              lazy
              class="img"
              fit="contain"
            ></el-image>
          </el-form-item>
          <el-form-item label="分享封面" prop="shareImage">
            <el-image
              :src="getImgUrl(formData.shareImage)"
              lazy
              class="img"
              fit="contain"
            ></el-image>
          </el-form-item>
          <el-form-item label="活动描述" prop="content">
            <editor
              v-model="formData.content"
              :min-height="192"
              :readOnly="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button @click="goBack">取消</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </el-card>
</template>

<script>
import { getSeckillById } from '@/api/activity/seckill'
export default {
  name: 'activity_detail',
  dicts: [
    'activity_status',
    'activity_goodsType',
    'activity_isReferralBonuses',
  ],
  data() {
    return {
      disabled: true,
      isShowAddGoods: false,
      formData: {
        seckillName: '',
        status: null,
        timeStart: '',
        timeEnd: '',
        nowPrice: null,
        costPrice: null,
        countNumber: null,
        isReferralBonuses: null,
        sell: null,
        inventedSalesNumber: null,
        rushBuyNumber: null,
        applicableUnit: '',
        createTime: '',
        tenantName: '',
        userName: '',
        coverImage: null,
        detailsImage: [],
        shareImage: null,
        content: null,
      },
      goodsList: [],
    }
  },
  filters: {
    typeFilter(val, type) {
      if (val === null) return null
      let data = type.filter((item) => {
        return val == item.value
      })
      if (data.length) {
        return data[0].label
      } else {
        return val
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getSeckillById()
    })
  },
  methods: {
    getSeckillById() {
      getSeckillById({ id: this.$route.params.id }).then((res) => {
        this.formData = res.data.activitySeckillDto
        this.formData.detailsImage =
          res.data.activitySeckillDto.detailsImage.split(',')
        this.goodsList = res.data.activitySeckillList
      })
    },
    goBack() {
      this.$router.go(-1) // 返回
      //关闭子页面
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      )
      this.$router.push(
        this.$store.state.tagsView.visitedViews[
          this.$store.state.tagsView.visitedViews.length - 1
        ].path
      )
    },
  },
}
</script>
<style scoped>
.img {
  height: 254px;
  border: 1px solid #ddd;
  display: block;
  margin-bottom: 15px;
}
</style>
